<template>
  <div class="container">
    <div v-if="isApp">
      <!-- 标题区域 -->
      <div
          style="display: flex;justify-content: space-between;align-items: center;height: 40px;font-size: 13px;border-bottom: 1px solid #efefef;">
        <div style="margin-left: 8px">搜索历史</div>
        <el-button @click="isDelete = true" size="medium" style="border: none" icon="el-icon-delete"></el-button>
      </div>
      <!-- 列表区域 -->
      <div style="display: flex;flex-wrap: wrap;">
        <div style="margin: 8px 8px 0 5px;" v-for="(item, i) in historys" :key="i" @click="goDetail(item)">
          <p class="history-name">{{ item }}</p>
        </div>
      </div>
    </div>

    <div style="display: flex;flex-direction: column">
      <img src="@/assets/imgs/empty.png" style="display: flex;align-items: center"/>
      <span style="text-align: center;font-size: 15px">暂无数据</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Empty",
  data() {
    return {
      form: {
        historyList: this.$route.query.historyList
      },
      isApp: false, // true：代表移动端，false：代表PC端
      name: ''
    }
  },
  created() {
    /** 先判断平台，pc端 or 移动端*/
    this.whichPlatform()
  },
  computed: {
    historys() {
      return [...this.form.historyList].reverse()
    }
  },
  methods: {
    /** PC端、移动端 判断*/
    whichPlatform() {
      if (window.screen.width < 800) {
        this.isApp = true
      } else {
        this.isApp = false
      }
    },
    goDetail(name) {
      this.name = name
      this.fetchData()
    },
  }
}
</script>

<style scoped>
.container {
  background-color: white;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  height: 100vh;
}

.history-name {
  border: 1px solid #e0e0e0;
  border-radius: 106px;
  font-size: 13px;
  padding: 4px 16px;
}
</style>